<script setup>
import bindSideBarDrag from "@/utils/drag.js"

// region 拖动样式
const container = useTemplateRef('container')
const sideH = ref(0)
const sideHStyle = computed(() => ({width: sideH.value > 0 ? sideH.value + 'px' : '60%'}))
const sideV = ref(0)
const sideVStyle = computed(() => ({height: sideV.value > 0 ? sideV.value + 'px' : '70%'}))

function bindDrag(){
  const containerEl = container.value
  if (!containerEl) return
  const rect = containerEl.getBoundingClientRect()
  bindSideBarDrag('dragH', rect, sideH, true)
  bindSideBarDrag('dragV', rect, sideV, false)
}

nextTick(() => {
  bindDrag()
})
window.onresize = () => bindDrag()
// endregion
</script>

<template>
  <div class="container" ref="container">
    <div class="left" :style="sideHStyle">
        <div class="header" :style="sideVStyle">
          <slot name="header"></slot>
        </div>
        <div id="dragV"/>
        <div class="main">
          <slot name="main"></slot>
        </div>
    </div>
    <div id="dragH"/>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background-color: var(--drag-color);
  display: flex;

  .left {
    display: flex;
    flex-direction: column;

    .header {
      position: relative;
      padding: 0;
    }

    .main {
      height: 0;  // 避免被内容撑开的溢出
      flex-grow: 1;
      position: relative;
    }
  }

  .right {
    width: 0;   // 避免被内容撑开的溢出
    flex-grow: 1;
    position: relative;
  }

  // ~~~~~~~~~~~~~~~~~~~~~~~~~拖拽条~~~~~~~~~~~~~~~~~~~~~~~~~
  #dragH {
    width: 6px;
    cursor: col-resize;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;

    &:hover{
      background-color: var(--drag-hover-color);
    }
  }

  #dragV {
    height: 6px;
    cursor: row-resize;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;

    &:hover{
      background-color: var(--drag-hover-color);
    }
  }
}
</style>